<template>
  <div ref="myRef" data-bs-toggle="tooltip" data-bs-placement="top"
       title="">
  </div>
</template>

<script>
import {ref, getCurrentInstance, onMounted} from 'vue'
import $ from "jquery";
import url from "@/router/api";
import {shuffle} from "@/util";

export default {
  name: "NameStatisticView",
  setup() {
    const {proxy} = getCurrentInstance()
    const myRef = ref(null)

    let data = [null];
    let name = [null];
    let activeCount = [null];
    let InActiveCount = [null];

    onMounted(() => {
      renderChart();
    })

    let myChart = null

    const renderChart = () => {
      if (myChart === null) {
        myChart = proxy.$echarts.init(myRef.value)
      }

      myChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} /个'
          }
        },
        series: [
          {
            name: 'active',
            type: 'line',
            smooth: true,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [{type: 'average', name: 'Avg'}]
            }
          },
          {
            name: 'Inactive',
            type: 'line',
            smooth: true,
            markPoint: {
              data: [{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}]
            },
            markLine: {
              data: [
                {type: 'average', name: 'Avg'},
                [
                  {
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max'
                  },
                  {
                    symbol: 'circle',
                    label: {
                      position: 'start',
                      formatter: 'Max'
                    },
                    type: 'max',
                    name: '最高点'
                  }
                ]
              ]
            }
          }
        ]
      });
    };
    setInterval(() => {
      if (myChart === null) {
        return
      }
      getAmountsName();
      myChart.setOption({
            xAxis: [
              {
                data: name,
              }
            ],
            series: [
              {
                data: activeCount,
              },
              {
                data: InActiveCount,
              }
            ]
          }
      )
    }, 5000);

    const getAmountsName = () => {
      $.ajax({
        url: url.amountNameStatus,
        type: "GET",
        success(resp) {
          if (resp.errorCode === "00000") {
            data = resp.data;
            let tempArr = [];
            for (let i of data) {
              tempArr.push(i);
            }
            shuffle(tempArr);
            for (let element of tempArr) {
              name.push(element.name);
              activeCount.push(element.activeCount);
              InActiveCount.push(element.inactiveCount);
            }

            while (name.length > 30) {
              name.shift();
              activeCount.shift();
              InActiveCount.shift();
            }
          }
        },
        error(resp) {
          console.log(resp)
        }
      })
    };

    return {
      myRef,
    }
  }
}
</script>

<style scoped>

</style>